.transactionsPage {
  .transactionsTile {
    //height: $minRouteHeightWithExtra !important;
    min-height: 350px;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 15px;
    text-align: center;

    @media screen and (max-width: $mobile) {
      margin-bottom: 0;
      margin-top: 0;
    }
  }

  .transactionsListContainer {
    height: 100%;
    max-height: 60vh;

    .transactionItem {
      display: grid;
      grid-gap: 10px;
      grid-template-rows: 100%;
      grid-template-columns: 30px 1fr 180px 35px;
      align-items: center;
      width: 100%;
      height: 90px;
      padding: 0 15px;
      border-bottom: 1px solid;
      transition: $transition1;
      transition-property: background-color, border-color;

      &:last-child {
        border-bottom: none;
      }

      .amount,
      .tokenSymbol {
        display: inline-flex;
      }

      &:hover {
        background-color: transparentize($color: $gray, $amount: 0.9);
      }

      .status {
        width: 35px;
        height: 35px;
        font-size: 25px;
        text-align: center;

        .verified {
          color: $green;
        }

        .committed {
          color: #aa935d;
        }

        .inProgress {
          color: $gray;
          animation: spin 0.5s linear 0s infinite;
        }

        .rejected {
          color: $red;
        }
      }

      .tooltip-wrapper {
        display: block;

        .tooltip {
          max-width: 200px;
          height: auto;
          white-space: initial;
          width: max-content;
        }
      }

      .mainInfo {
        text-align: left;
        &.noInfo {
          @media screen and (min-width: $mobile) {
            position: relative;
            top: 4px;
          }
        }

        .createdAt {
          color: $gray;
          font-size: 12px;
          line-height: 14px;
          cursor: default;
        }

        .amount {
          font-size: 24px;
          line-height: 32px;

          &.small {
            font-size: $fontSizeRegular;
          }
        }

        .nft {
          .contentHash {
            display: block;
            font-size: 12px;
            max-width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .copyContentHash {
            display: flex;
            align-items: center;
            color: $gray;
            cursor: pointer;
            transition: color $transition1;
            &:active {
              transition-duration: 0.0001s;
              color: $green !important;
            }

            .iconContainer {
              display: flex;
              align-items: center;

              svg {
                position: relative;
                top: -0.5px;
                height: 15px;
                width: auto;
                overflow: visible;
                margin-right: 4px;
              }
              span {
                font-size: 12px;
              }
            }
          }
        }

        .tokenSymbol {
          font-size: $tempFontSizeMedium;
          line-height: 20px;
        }
      }

      .actionInfo {
        width: 100%;

        .actionType {
          display: flex;
          align-items: center;
          color: $gray;
          font-size: 16px;
          line-height: 19px;

          @media screen and (max-width: $mobile) {
            justify-content: center;

            svg.modalOpenIcon {
              top: 1px !important;
              width: 15px;
              height: 15px;
            }
          }

          svg {
            margin-left: 5px;
            &.modalOpenIcon {
              transition: filter $transition1;
              cursor: pointer;

              &:hover {
                filter: brightness(125%);
              }

              &:active {
                transition-duration: 0.001s;
                filter: brightness(90%);
              }
            }
          }
        }

        .actionValue {
          display: block;
          width: fit-content;
          max-width: 100%;
          overflow: hidden;
          font-size: 16px;
          line-height: 19px;
          text-overflow: ellipsis;

          @media screen and (max-width: $mobile) {
            margin: 0 auto;
            text-align: center;
          }
        }

        .linkText {
          display: block;
          margin-top: 7px;
          font-size: $fontSizeRegular;
          line-height: 1.1;
          text-align: left !important;
        }
      }
    }

    .nothingFound {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 85%;
      overflow: hidden;
      text-align: center;

      &.loadMoreAvailable {
        height: calc(100% - 45px);
      }
    }
  }

  @media (max-width: $mobile) {
    .transactionsButtonGroup {
      gap: 5px;

      .button {
        display: inline-flex !important;
        align-items: center;
        margin: 0 !important;
        padding: 0 15px 0 10px !important;
        line-height: 100% !important;
        min-width: fit-content !important;
        min-height: 40px !important;

        svg {
          top: initial !important;
          max-width: 12px !important;
          width: auto !important;
          height: auto !important;
        }
      }
    }
    .transactionsTile {
      display: flex;
      flex-direction: column;
      min-height: 350px;
      justify-content: flex-start;
      width: 100%;
      text-align: center;

      .transactionItem {
        position: relative;
        display: grid;
        grid-template-columns: 1.2rem 1fr 1fr;
        padding: 0.5rem 0 !important;
        gap: 0.15rem;
        height: auto;
        align-items: flex-start;

        .status {
          position: relative;
          top: -1px;
          width: 18px;
          height: 18px;

          .tooltip-wrapper {
            height: 100%;
            width: 100%;

            svg {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
        }

        .mainInfo {
          display: inline-flex;
          text-align: left;
          justify-content: flex-start;
          align-items: stretch;
          flex-wrap: wrap;
          flex-grow: 1;

          & > * {
            text-align: left !important;
            word-break: break-word;
            line-height: 1rem !important;
            letter-spacing: -0.02rem;
          }

          .amount {
            word-break: break-all;
            white-space: normal;
          }

          .amount,
          .tokenSymbol {
            font-size: 12px !important;
            font-family: $firaCode;
          }

          .tokenSymbol {
            margin-left: 0.1rem;
          }

          //
          .tooltip-wrapper {
            & > div {
              font-size: 10px !important;
              text-align: left;
              line-height: 1rem;
            }

            white-space: nowrap;
            flex-grow: 1;
            width: 100%;
          }
        }

        //
        .actionInfo {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          & > * {
            text-align: left !important;
            word-break: break-word;
            line-height: 1rem !important;
            letter-spacing: -0.01rem;
            font-size: 14px;
          }

          .actionType,
          .actionType > span {
            text-align: left !important;
            white-space: nowrap;
            font-size: 10px !important;
          }

          .actionValue {
            font-size: 12px !important;
            text-align: left !important;
            margin: 0;
            white-space: nowrap;
          }

          .linkText {
            margin-top: 0;
            width: auto !important;
            text-align: left !important;
            font-size: 10px !important;
            align-self: flex-start;
            white-space: nowrap;
            justify-self: flex-start;

            svg {
              width: 12px;
              height: 12px;
            }
          }
        }

        .externalLink {
          position: absolute;
          left: 0.4rem;
          top: 1.15rem;
          padding: 0 !important;
          justify-self: center;
          width: 1.3rem;
          height: 1.3rem;

          svg {
            top: -2.5px;
            left: 0;
          }
        }
      }
    }
  }
}

body.inkline {
  &.-light {
    .transactionsPage .transactionsListContainer {
      &::-webkit-scrollbar-thumb {
        background-color: $input-border-color-focus-light;
      }

      .transactionItem {
        border-color: $input-border-color-light;

        .copyContentHash:hover {
          color: $black;
        }
      }
    }
  }

  &.-dark {
    .transactionsPage .transactionsListContainer {
      &::-webkit-scrollbar-thumb {
        background-color: $input-border-color-focus-dark;
      }

      .transactionItem {
        border-color: $input-border-color-dark;

        .copyContentHash:hover {
          color: $white;
        }
      }
    }
  }
}
